<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团 - 美好生活小帮手</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
    <!-- Element UI -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css">
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
    <!-- Element UI -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
    <style>
        :root {
            --primary: #ff6600;
            --secondary: #ffd166;
            --dark: #181818;
            --light: #f5f5f5;
            --gray: #f0f0f0;
            --border: #e0e0e0;
            --text-primary: #333;
            --text-secondary: #999;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: var(--text-primary);
            padding-bottom: 60px;
        }

        .meituan-header {
            background: var(--primary);
            color: white;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .meituan-header .logo {
            font-size: 1.5rem;
            font-weight: bold;
            margin-right: 15px;
        }

        .search-bar {
            flex: 1;
            background: white;
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            color: var(--text-secondary);
        }

        .search-bar input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 5px 10px;
            outline: none;
        }

        .location-selector {
            margin-right: 10px;
            font-size: 0.9rem;
        }

        .location-selector i {
            margin-left: 5px;
        }

        .category-grid {
            background: white;
            padding: 15px 0;
            margin-bottom: 10px;
        }

        .category-item {
            text-align: center;
            padding: 10px 0;
        }

        .category-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--gray);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 1.5rem;
            color: var(--primary);
        }

        .category-name {
            font-size: 0.85rem;
            color: var(--text-primary);
        }

        .banner {
            background: white;
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }

        .banner img {
            width: 100%;
            height: auto;
        }

        .section-title {
            padding: 15px;
            font-size: 1.1rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 16px;
            background: var(--primary);
            margin-right: 10px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
        }

        .product-image {
            height: 150px;
            background-size: cover;
            background-position: center;
        }

        .product-info {
            padding: 12px;
        }

        .product-title {
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price {
            color: var(--primary);
            font-weight: bold;
            font-size: 1.1rem;
            margin: 5px 0;
        }

        .product-price .original-price {
            color: var(--text-secondary);
            font-size: 0.8rem;
            text-decoration: line-through;
            margin-left: 5px;
        }

        .product-sales {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .tab-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            display: flex;
            border-top: 1px solid var(--border);
            padding: 8px 0;
        }

        .tab-item {
            flex: 1;
            text-align: center;
            padding: 5px 0;
            color: var(--text-secondary);
        }

        .tab-item.active {
            color: var(--primary);
        }

        .tab-item i {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 3px;
        }

        .tab-item .tab-text {
            font-size: 0.7rem;
        }

        .discount-tag {
            background: var(--primary);
            color: white;
            font-size: 0.7rem;
            padding: 2px 5px;
            border-radius: 3px;
            margin-right: 5px;
        }

        .el-carousel__item {
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <div class="meituan-header">
            <div class="location-selector">
                <span>北京</span>
                <i class="fas fa-angle-down"></i>
            </div>
            <div class="search-bar">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索商家、商品名称">
            </div>
            <div class="ms-3">
                <i class="fas fa-user"></i>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="category-grid">
            <div class="container">
                <div class="row text-center">
                    <div class="col-3" v-for="(category, index) in categories" :key="index">
                        <div class="category-item">
                            <div class="category-icon" :style="{background: category.bgColor}">
                                <i :class="category.icon"></i>
                            </div>
                            <div class="category-name">{{ category.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="container mb-3">
            <div class="banner">
                <el-carousel height="150px" indicator-position="none">
                    <el-carousel-item v-for="(banner, index) in banners" :key="index">
                        <img :src="banner.image" :alt="banner.title" style="width: 100%; height: 100%; object-fit: cover;">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <!-- 优惠推荐 -->
        <div class="container mb-3">
            <div class="section-title">
                <span>优惠推荐</span>
            </div>
            <div class="row">
                <div class="col-6" v-for="(deal, index) in deals" :key="index">
                    <div class="product-card">
                        <div class="product-image" :style="{backgroundImage: `url(${deal.image})`}"></div>
                        <div class="product-info">
                            <div class="product-title">{{ deal.title }}</div>
                            <div class="product-price">
                                ¥{{ deal.price }}
                                <span class="original-price">¥{{ deal.originalPrice }}</span>
                            </div>
                            <div class="product-sales">{{ deal.sales }}人已团购</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 猜你喜欢 -->
        <div class="container mb-3">
            <div class="section-title">
                <span>猜你喜欢</span>
            </div>
            <div class="row">
                <div class="col-6" v-for="(product, index) in products" :key="index">
                    <div class="product-card">
                        <div class="product-image" :style="{backgroundImage: `url(${product.image})`}"></div>
                        <div class="product-info">
                            <div class="product-title">{{ product.title }}</div>
                            <div>
                                <span class="discount-tag">减</span>
                                <span class="discount-tag">折</span>
                            </div>
                            <div class="product-price">
                                ¥{{ product.price }}
                                <span class="original-price">¥{{ product.originalPrice }}</span>
                            </div>
                            <div class="product-sales">{{ product.sales }}人已售</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="tab-bar">
            <div class="tab-item active">
                <i class="fas fa-home" style="width: 100%;"></i>
                <span class="tab-text">首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-search" style="width: 100%;"></i>
                <span class="tab-text">发现</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-receipt" style="width: 100%;"></i>
                <span class="tab-text">订单</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user" style="width: 100%;"></i>
                <span class="tab-text">我的</span>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    categories: [
                        { name: '美食', icon: 'fas fa-utensils', bgColor: '#FFE4B5' },
                        { name: '外卖', icon: 'fas fa-motorcycle', bgColor: '#E6E6FA' },
                        { name: '酒店', icon: 'fas fa-hotel', bgColor: '#DDA0DD' },
                        { name: '休闲娱乐', icon: 'fas fa-gamepad', bgColor: '#B0E0E6' },
                        { name: '外卖会员', icon: 'fas fa-crown', bgColor: '#FFE4E1' },
                        { name: '周边游', icon: 'fas fa-bus', bgColor: '#D8BFD8' },
                        { name: '丽人', icon: 'fas fa-spa', bgColor: '#FFFACD' },
                        { name: '全部分类', icon: 'fas fa-th', bgColor: '#F0FFF0' }
                    ],
                    banners: [
                        { title: '夏日美食节', image: 'https://images.unsplash.com/photo-1555939513-36ac2a04d425?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '酒店特惠', image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '电影票优惠', image: 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
                    ],
                    deals: [
                        { title: '海底捞火锅', price: '88', originalPrice: '128', sales: '1286', image: 'https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '星巴克咖啡', price: '25', originalPrice: '35', sales: '987', image: 'https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '必胜客披萨', price: '45', originalPrice: '68', sales: '654', image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '麦当劳套餐', price: '32', originalPrice: '45', sales: '1203', image: 'https://images.unsplash.com/photo-1553909489-c3be77187dcd?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
                    ],
                    products: [
                        { title: '北京烤鸭套餐', price: '98', originalPrice: '158', sales: '2563', image: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '日式料理套餐', price: '128', originalPrice: '198', sales: '1245', image: 'https://images.unsplash.com/photo-1579584425555-c3ce17fd4351?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '川菜馆招牌菜', price: '68', originalPrice: '98', sales: '987', image: 'https://images.unsplash.com/photo-1512054502232-10a0a035d672?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
                        { title: '韩式烧烤双人餐', price: '138', originalPrice: '188', sales: '756', image: 'https://images.unsplash.com/photo-1555939513-8e737c8183a4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
                    ]
                }
            }
        });
    </script>
</body>
</html>